<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">

    <title>欢迎页</title>
</head>

<body id="body">
<div id="welcome">
    <div class="container">
        <img id="img" src="http://iconfont.alicdn.com/t/e3b1ab99-d50e-4912-8c12-0963a50b9981.png@200h_200w.jpg"
             alt="头像">
    </div>
    <div id="Greetings" class="Greetings">

    </div>
    <div class="hr"></div>
    <div class="bracket left"></div>
    <div class="word" id="hitokoto_text"></div>
    <div class="bracket right"></div>
    <div class="author" id="hitokoto_author"></div>
</div>
<div id="change"></div>
</div>

<!-- <div class="timeimg">
    <img
    src="https://mat1.gtimg.com/pingjs/ext2020/weather/2017/images/bg-cb2b2552e8.jpg" alt="">
</div> -->
<!-- <iframe frameborder="no"  marginwidth="0" marginheight="0" width=100% height=86
src="//music.163.com/outchain/player?type=2&id=512358238&auto=0&height=66"></iframe> -->
</body>
<script>
    window.onload = function () {
        getInfo();
        setGreeting();
    };
    function getTime() {
        let date = new Date;
        return date.getHours()
    }
    function setGreeting() {
        let now = getTime();
        let gretting = document.getElementById('Greetings');
        if (now >= 19 || now < 6) {
            gretting.innerHTML = 'Hi~ 晚上好'
            document.body.style.backgroundColor = '#2c304a'
        }
        if (now >= 6 && now <= 10) {
            gretting.innerHTML = 'Hi~ 早上好'
            document.body.style.backgroundColor = '#337d56'
        }
        if (now >= 10 && now <= 12) {
            gretting.innerHTML = 'Hi~ 中午好'
            document.body.style.backgroundColor = '#40a9ff'
        }
        if (now > 12 && now < 19) {
            gretting.innerHTML = 'Hi~ 下午好'
            document.body.style.backgroundColor = 'rgb(182,165,158)'
        }
    }
    function getInfo() {
        fetch('https://v1.hitokoto.cn?c=i')
            .then(response => response.json())
            .then(data => {
                const hitokoto = document.getElementById('hitokoto_text')
                const hitokotoauth = document.getElementById("hitokoto_author")
                hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
                hitokoto.innerText = data.hitokoto
                hitokotoauth.innerHTML = '<br>' + ' —— ' + '《' + data.from + '》'
            })
            .catch(console.error)
    }
    let change = document.getElementById("change");
    let img = document.getElementById("img");
    change.onclick = function () {
        //img.src = "https://api.66mz8.com/api/rand.portrait.php?type=动漫&format=jpg&"+Math.random();

        getInfo();
    }


</script>
<style>
    body {}

    .hr {
        background: rgb(199, 199, 199);
        display: block;
        margin: auto;
        height: 1px;
        margin-top: 10px;
    }

    .timeimg {}

    .Greetings {
        display: block;
        margin: auto;
        margin-top: 10px;
        width: 130px;
        color: #fff;
        text-align: center;
        font-weight: 400;
        font-size: 24px;
    }

    #change::after {
        margin: auto;
        content: "❯";
    }

    #change:hover {
        background: rgba(110, 81, 81, 0.5);
    }

    #change:active {
        background: rgba(68, 53, 53, 0.5);
    }

    #change {
        user-select: none;
        border: 1px solid rgba(24, 112, 90, 0);
        cursor: pointer;
        display: flex;
        color: #fff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 1px 2px 4px 4px rgba(0, 0, 0, 0.2);
        background: rgba(141, 118, 118, 0.5);
        overflow: auto;
        margin: auto;
        line-height: 50px;
        /*垂直居中关键*/
        position: absolute;
        top: 35%;
        left: 21%;
        bottom: 0;
        right: 0;
    }

    #img {
        display: block;
        margin: auto;
        margin-top: -75px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        box-shadow: 1px 2px 4px 4px rgba(0, 0, 0, 0.4);
    }

    #welcome {

        /*让div内部文字居中*/
        background-color: #fff;
        border-radius: 5px;
        width: 10%;
        height: 35%;
        min-width: 300px;
        max-width: 500px;
        padding: 40px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(45deg, rgb(90, 77, 77),
        rgb(61, 42, 42), rgb(116, 87, 89));
        box-shadow: 1px 2px 4px 2px rgba(0, 0, 0, 0.2);
        opacity: 1;
    }

    .word {
        display: block;
        margin: auto;
        margin-top: 15%;
        text-align: center;
        color: #fff;
        font-weight: 500;
        font-family: Arial, Helvetica, sans-serif;
    }

    .author {
        color: #fff;
        display: block;
        margin: auto;
        margin-top: auto;
        text-align: right;

    }
</style>

</html>